<template>
  <div>
    <el-row class="back-head" type="flex" align="middle">
      <span @click="backPath()" style="cursor: pointer"><i class="el-icon-arrow-left"></i>返回</span>
      <span class="primary">创建商家红包</span>
    </el-row>
    <div class="main">
      <el-form :model="params" ref="ruleForm" label-width="120px" label-position="right" size="small">
        <el-row class="head" type="flex" align="middle">红包信息</el-row>
        <div class="item">
          <el-form-item label="选择商家" prop="busid" :rules="[{ required: true, message: '请选择商家', trigger: 'change' }]">
            <el-row type="flex">
              <el-button style="width: 500px;text-align: left" @click="dialogTableVisible = true"
                placeholder="点击右边按钮选择商家">{{params.busname?params.busname:'选择商家'}}
              </el-button>
            </el-row>
          </el-form-item>
          <el-form-item label="活动名称" prop="name" :rules="[{ required: true, message: '请输入活动名称', trigger: 'blur' }]">
            <el-input v-model="params.name" placeholder="输入活动名称" />
          </el-form-item>
          <el-form-item label="数量限制" required style="margin-bottom: 0">
            <el-row type="flex">
              <span style="margin-right: 5px;">限</span>
              <el-select style="" v-model="params.redlimittype" placeholder="请选择">
                <el-option label="每天数量" value="0" />
                <el-option label="总数量" value="1" />
              </el-select>
              <span style="margin: 0 5px;" > ，</span>
              <el-form-item prop="rednum" :rules="[{ required: true, message: '请输入数量' },]">
                <el-input-number v-model="params.rednum" :min='1' :max='9999999' :precision='0' />
              </el-form-item>
              <span style="margin-left: 5px;">个</span>
            </el-row>
          </el-form-item>
          <el-form-item label="领取限制" required>
            <el-select v-model="params.redpersonlimittype" placeholder="请选择">
              <el-option label="每人1张" value="0" />
              <el-option label="每人每天1张" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="红包金额" required style="margin-bottom: 0">
            <el-row type="flex">
              <el-select v-model="diyPrice" placeholder="请选择">
                <el-option label="固定金额" value="1" />
                <el-option label="随机金额" value="2" />
              </el-select>
              <span style="margin:0 5px;">,</span>
              <el-form-item prop="randomMin" v-if="diyPrice == 1" :rules="[{ required: true, message: '请输入金额'}]">
                <el-input-number :min='0' :max='9999999' :precision='2' v-model="params.randomMin" /> 元
              </el-form-item>
              <el-row type="flex" v-if="diyPrice ==2">
                <span style="margin:0 5px;">随机金额最少</span>
                <el-form-item prop="randomMin" :rules="[{ required: true, message: '请输入金额' }]">
                  <el-input-number v-model="params.randomMin" :min='0' :max='params.randomMax?params.randomMax:"9999"' :precision='2' />
                </el-form-item>
                <span style="margin:0 5px;">元,最多</span>
                <el-form-item prop="randomMax" :rules="[{ required: true, message: '请输入金额' }]">
                  <el-input-number v-model="params.randomMax" :min='params.randomMin?params.randomMin:0' :max='9999' :precision='2' />
                </el-form-item>
                <span style="margin-left:5px;">元</span>
              </el-row>
            </el-row>
          </el-form-item>
          <el-form-item prop='redvalidday' label='红包有效期' :rules="[{ required: true, message: '请输入天数'}]">
            <el-input-number style="margin: 0 5px;" :min='1' :max='9999' :precision='0' v-model="params.redvalidday" /> 天
          </el-form-item>
        </div>
        <el-row class="head" type="flex" align="middle">红包生效配置</el-row>
        <div class="item">
          <el-form-item label="起止日期" prop="startTimeToendTime" :rules="[{ required: true, message: '请起止日期', trigger: 'blur' }]">
            <el-date-picker style="width:500px;" v-model="params.startTimeToendTime" type="daterange" align="left"
              :clearable='false' :editable='false'
              :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions" unlink-panels
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" />
          </el-form-item>
          <el-form-item label="使用条件" prop="fulls" :rules="[{ required: true, message: '请输入金额' }]">
            消费满 <el-input-number style="margin: 0 5px;" v-model="params.fulls" :min='0' :max='9999' :precision='2' /> 可使用
          </el-form-item>
        </div>
        <el-row class="head" type="flex" align="middle">同享设置</el-row>
        <div class="item">
          <el-form-item label="是否同享" prop="name"><el-switch v-model="params.shared" /></el-form-item>
        </div>
        <el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-dialog title="选择商家" v-dialogDrag :visible.sync="dialogTableVisible" width="800px" :close-on-press-escap="true">
      <shop-list v-on:listenToShop="getShopData" />
    </el-dialog>
  </div>
</template>
<script>
  import shopList from '@/components/dialog/shopList'

  export default {
    components: {
      shopList,
    },
    data() {
      return {
        pickerOptions:{
          disabledDate(time) {
            return time.getTime() <= (Date.now() - 3600 * 1000 * 24 )
          },
        },
        dialogTableVisible: false,                          //选择商家
        busniessMsg: [],                                    //选中的商家信息
        diyPrice: '1',                                      //红包金额方式
        params: {
          busname: '',                                      //商家名称
          busid: '',                                        //商家id
          name: '',                                         //活动名称
          ptype: '10',                                      //商户红包
          redlimittype: '0',                                //数量限制方式
          redamount:undefined,                              //限制红包数量
          redpersonlimittype: '0',                          //领取限制
          randomMin:undefined,                              //固定金额
          randomMax: undefined,                             //固定金额
          redvalidday:undefined,                            //红包有效天数
          fulls: undefined,                                 //满返红包
          startTimeToendTime: '',                           //起止时间
          shared: false,                                    //是否同享受
        },
      }
    }, methods: {
      getShopData(data) {
        this.params.busname = data.name
        this.params.busid = data.id
        this.dialogTableVisible = false
      }, submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params }
            if (this.diyPrice == '1') {
              params.redamount = params.randomMin
            } else if (this.diyPrice == '2') {
              params.redamount = `${params.randomMin},${params.randomMax}`
            }
            params.startTimeToendTime = params.startTimeToendTime ? params.startTimeToendTime.join(',') : ''
            delete params.randomMin
            delete params.randomMax
            this.issubmitLoading = true
            this.$http.post('/server/activity/save', JSON.stringify(params)).then(res => {
                if (res.data.success) {
                  this.$message({type: 'success', message: '添加商户红包活动成功'})
                  this.$router.push({path: '/main/activity/pron'})
                }
              }).finally(() => { this.issubmitLoading = false })

          } else {
            this.$message.error('有不合法的输入或未填写的输入，请检查页面修改再提交')
            return false
          }
        })
      },
      backPath() {
        this.$router.replace({path: '/main/activity/pron'})
      }
    }
  }
</script>
<style lang="scss" scoped>
  .primary {
    color: $c-active-shopbox;
  }

  .main .head {
    background: $c-active-shopbox;
  }

  @import './css/actives.scss';
</style>
